<template>
  <div>
    <a-row>
      <a-col :span="12"  class='mb20'>
          <a-input  placeholder="请输入名称"  class='w200'  v-model='search.keyWord'/>
          <a-button type="primary"  @click='pageInit()'>搜索</a-button>
      </a-col>
    </a-row>
  <a-row  class='mb20'>
    <a-col :span="6">   
          <router-link  to='/supplier/add'> <a-button type="primary" icon="plus-circle">新建</a-button></router-link>
      </a-col>
  </a-row>
  <a-table :columns="columns" :dataSource="data"  :pagination="pagination"  :rowKey="record => record.code"  @change="handleTableChange"> 
    <span slot='orderNum'  slot-scope="text, record" >
      <a-button size='small' ><router-link :to='{path:"/order",query:{entCode:record.code}}'>查看</router-link></a-button>
    </span>
    <span slot='entUser'  slot-scope="text, record" >
      <a-button size='small' ><router-link :to='{path:"/ent/buyerUser",query:{entCode:record.code}}'>查看</router-link></a-button>
    </span>
    <span slot='createTime'  slot-scope="text, record" >{{text | formatDate}}</span>
    <span slot="action" slot-scope="text, record">
      <router-link  :to='{path:"/supplier/detail",query:{code:record.code}}' class='color-blue'>详情</router-link>
      <a-divider type="vertical" />
      <router-link  :to='{path:"/supplier/edit",query:{code:record.code}}' class='color-blue'>编辑</router-link>
      <a-divider type="vertical" />
      <a-popconfirm title="确认删除当前数据？" @confirm="confirmDel(record.code)"   okText="确认" cancelText="取消">
          <a href="javascript:;"  class='color-red'>删除</a>
      </a-popconfirm>
    </span>
  </a-table>
  </div>
</template>

<script>
import  { customerList,delEntCustomer }  from  '@/api/customer/index'
export default {
  name: 'supplier',
  data () {
    return {
        columns:[
        {
          dataIndex: 'name',
          key: 'name', 
          title:'供应商名称',
          width:'12%'
        }, {
          title: '地址',
          dataIndex: 'address',
          width:'14%'
        },{
          title: '行业',
          dataIndex: 'industry',
          width:'12%'
        }, {
          title: '联系人',
          dataIndex: 'contact',
          width:'10%'
        },
        {
          title: '联系方式',
          dataIndex: 'mobile',
          width:'10%'
        },  
          {
          title: '订单',
          scopedSlots: { customRender: 'orderNum' }, 
        },{
          title: '企业用户',
          scopedSlots: { customRender: 'entUser' },  
        },{
          title: '创建时间',
          dataIndex:'createTime',
          scopedSlots: { customRender: 'createTime' }, 
          width:'10%' 
        },{
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          width:'15%'
        }],
        data:[],
        search:{
          supOrBuyer:'1',
          pageNo:1,
          pageSize:10,
          keyWord:''
        },
        pagination:{
              total:0,
              pageSize: 10,//每页中显示10条数据
              showSizeChanger: true,

              pageSizeOptions: ["10", "20"],//每页中显示的数据
              showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
            },                                                                                                
        }
  },
  created(){
    this.pageInit()
  },
  methods:{
     pageInit(){
        customerList(this.search).then((res)=>{
            this.data = res.data.dataList
            this.pagination.total = res.data.totalRs
        })
     },
     confirmDel(code){
       delEntCustomer(code).then((res)=>{
        if(res.data.flag == true){
          this.$message.success(res.data.msg)
          this.pageInit()
        }
       })
    },
      /*table页数变化*/
    handleTableChange (pagination, filters, sorter) {
        // console.log(pagination);
        this.search.pageNo = pagination.current
        this.search.pageSize =pagination.pageSize
        this.pageInit()
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ant-input{width: 200px;}
</style>
